<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" src="../js/common.js"></script>

		<style type="text/css">
			.search {
				padding: 9px 12px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">所在位置</h1>
		</header>
		<div class="mui-content">
			<div class="search">
				<div class="mui-input-row mui-search">
					<input type="search" id="serach" class="mui-input-clear" placeholder="搜索附近的位置">
				</div>
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" style="font-size: 14px;" onclick="queryGeoLocation()">
						当前位置：<span id="useraddress"></span>
					</a>
				</li>
			</ul>
			<ul class="mui-table-view" id="list">
				
			</ul>
		</div>

		<script src="../mui/js/mui.min.js"></script>
		<script type="text/javascript" src="../js/immersed.js"></script>
		<script type="text/javascript">
			mui.init()
			if(window.plus) {
				queryGeoLocation();
			} else {
				document.addEventListener("plusready", queryGeoLocation, false);
			}
			var useraddress=document.getElementById("useraddress")
			var serach=document.getElementById("serach")
			var list=document.getElementById("list")
			
			
			serach.addEventListener('input',function(e){
				
				queryGeoLocation(serach.value)
			})
			function queryGeoLocation(val) {
				plus.geolocation.getCurrentPosition(function(res) { // getCurrentPosition: 获取当前设备位置信息
				
					search(res.coords.latitude, res.coords.longitude,val)
					useraddress.innerHTML=res.addresses
				}, function(res) {
					// console.log(JSON.stringify(res))
				}, {
					provider: 'baidu' // 优先使用的定位模块  百度定位模块
				});

			}

			function search(latitude, longitude,val) {
				var map = null
				var html=''
				var searchObj = new plus.maps.Search(map);
				searchObj.onPoiSearchComplete = function(state, result) {

					if(state == 0) {
						if(result.currentNumber <= 0) {
							alert("没有检索到结果");
						}
						for(var i = 0; i < result.currentNumber; i++) {
							var pos = result.getPosition(i);
							console.log(JSON.stringify(pos))
							html+='<li class="mui-table-view-cell"><a class="mui-navigate-right">'+pos.address+'</a></li>'
						}
						
						list.innerHTML=html
					} else {
//						alert("检索失败");
					}
				}
				var pt = new plus.maps.Point(longitude, latitude); 
				console.log(JSON.stringify(pt))
				searchObj.poiSearchNearBy(val, pt, 1000);
			}
			
			
		</script>

	</body>

</html>